Ant Design Vue — Autocomplete

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Autocomplete Input

We can add an autocomplete input withn the a-auto-complete component:

<template>
  <a-auto-complete
    v-model="value"
    :data-source="dataSource"
    style="width: 200px"
    placeholder="input here"
    @select="onSelect"
    @search="onSearch"
    @change="onChange"
  />
</template>
<script>
export default {
  data() {
    return {
      value: "",
      dataSource: ["apple", "orange", "grape"]
    };
  },
  watch: {
    value(val) {
      console.log("value", val);
    }
  },
  methods: {
    onSearch(searchText) {
      this.dataSource = this.dataSource.filter(d => d.includes(searchText));
    },
    onSelect(value) {
      console.log("onSelect", value);
    },
    onChange(value) {
      console.log("onChange", value);
    }
  }
};
</script>

We add the v-model directive to bind the inputted value to a reactive property.

It also emits the select , search , and change events.

select is emitted when we select an item.

search is emitted when we are searching.

change is emitted when we change the input.

data-source has an array with the data source.

Also, we can display the autocomplete item by populate the dataSource slot:

<template>
  <div style="width: 250px">
    <a-auto-complete
      class="certain-category-search"
      dropdown-class-name="certain-category-search-dropdown"
      :dropdown-match-select-width="false"
      :dropdown-style="{ width: '300px' }"
      size="large"
      style="width: 100%"
      placeholder="input here"
      option-label-prop="value"
    >
      <template slot="dataSource">
        <a-select-opt-group v-for="group in dataSource" :key="group.title">
          <span slot="label">
            {{ group.title }}
            <a
              style="float: right"
              href="https://www.google.com/search?q=foo"
              target="_blank"
              rel="noopener noreferrer"
            >more</a>
          </span>
          <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
            {{ opt.title }}
            <span class="certain-search-item-count">{{ opt.count }} people</span>
          </a-select-option>
        </a-select-opt-group>
        <a-select-option key="all" disabled class="show-all">
          <a
            href="https://www.google.com/search?q=baz"
            target="_blank"
            rel="noopener noreferrer"
          >View all results</a>
        </a-select-option>
      </template>
      <a-input>
        <a-icon slot="suffix" type="search" class="certain-category-icon"/>
      </a-input>
    </a-auto-complete>
  </div>
</template>
<script>
const dataSource = [
  {
    title: "Libraries",
    children: [
      {
        title: "foo",
        count: 10000
      },
      {
        title: "bar",
        count: 10600
      }
    ]
  },
  {
    title: "Articles",
    children: [
      {
        title: "baz",
        count: 100000
      }
    ]
  }
];
export default {
  data() {
    return {
      dataSource
    };
  }
};
</script>

We loop through the items in the dataSource reactive property to display the items.

Also, we set the class attribute to set the classes for our auto-complete.

The input can be customized. We just add the input we want to use inside the a-auto-complete component inside:

<template>
  <a-auto-complete
    :data-source="dataSource"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </a-auto-complete>
</template>
<script>
export default {
  data() {
    return {
      dataSource: ["apple", "orange", "grape"]
    };
  },
  methods: {
    onSelect(value) {
      console.log("onSelect", value);
    },
    handleSearch(value) {
      this.dataSource = this.dataSource.filter(d => d.includes(value));
    },
    handleKeyPress(ev) {
      console.log("handleKeyPress", ev);
    }
  }
};
</script>

We put it in the a-textarea inside the a-auto-complete to use a text area instead of a text input.

Conclusion

We can add autocomplete inputs our Vue app with Ant Design Vue.